<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- import CSS -->
  <link rel="stylesheet" href="../js/3rd/elementUi/index.css">
  <link rel="stylesheet" href="../css/pc.css">
  <script src="../js/3rd/elementUi/vue.js"></script>
  <script src="../js/3rd/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div id="projectLists" class="project-lists">
    
	<el-container>
	  <el-aside class="sider-bar" id="siderbar">
      <div class="logo"><img src="../image/logo.jpg">来赚吧管理后台</div> 
	    <tp-siderbar title="发布项目"></tp-siderbar>
	  </el-aside>
    <el-main>
	  <div class="right-content">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread-bd">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目列表</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-table
          :data="projectUserData"
          style="width: 100%">
		  <el-table-column
		    label="姓名"
		    width="100">
		    <template slot-scope="scope">
		      <span >{{ scope.row.realName }}</span>
		    </template>
		  </el-table-column>
          <el-table-column
            label="账号(手机号)"
            width="180">
            <template slot-scope="scope">
              <span >{{ scope.row.telephone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="180">
            <template slot-scope="scope">
              <span >{{ scope.row.createTime|formatData }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户状态"
            width="180">
            <template slot-scope="scope">
              <span >{{ scope.row.status|status }}<div v-if="scope.row.status=='4'">原因：({{scope.row.rejectReason}})</div></span>
            </template>
          </el-table-column>
		  <el-table-column
			label="身份证号"
			width="180">
			<template slot-scope="scope">
			  <span >{{ scope.row.idNo }}</span>
			</template>
		  </el-table-column>
		  <el-table-column
		    label="银行卡号"
		    width="180">
		    <template slot-scope="scope">
		      <span >{{ scope.row.bankNo}}</span>
		    </template>
		  </el-table-column>
		  <el-table-column
		    prop="images"
		    header-align="center"
		    align="center"
		    width="150px"
		    label="凭证图片">
		    <template slot-scope="scope">
		     <el-popover
		      placement="left"
		      title=""
		      trigger="click">
			  <div class="image-s" style="height: 750px;overflow-y: auto;max-width: 950px;">
				  <div>身份证号</div>
				  <div>{{scope.row.idNo}}</div>
				  <div>银行开户行</div>
				  <div>{{scope.row.bankName}}</div>
				  <div>银行卡号</div>
				  <div>{{scope.row.bankNo}}</div>
				  <div>银行卡正面</div>
				  <img  :src="scope.row.bankCardPositive"/>				  
				  <div>银行卡反面</div>
				  <img  :src="scope.row.bankCardNegative"/>
				  <div>身份证正面</div>
				  <img  :src="scope.row.idPositive"/>
				  <div>身份证反面</div>
				  <img  :src="scope.row.idNegative"/>
				  <div>手持身份证</div>
				  <img  :src="scope.row.personIdImage"/>
				  <div>付款凭证</div>
				  <img  :src="scope.row.moneyImage"/>				 
			  </div>      
		      <img slot="reference" :src="scope.row.moneyImage" :alt="scope.row.moneyImage" style="max-height: 50px;max-width: 130px">			  
		     </el-popover>
		    </template>
		  </el-table-column>
          <el-table-column
            label="备注(地址，详情)"
            width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>地址: {{ scope.row.address }}</p>
                <p>备注: {{ scope.row.doc }}</p>    
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">查看备注详情</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" v-if="scope.row.status!=='4'">
              <el-button
                size="mini"
                @click="handleCheckUser(scope.$index, scope.row)">审核</el-button>              
            </template>
          </el-table-column>
        </el-table>
      </template> 

      <div class="clearfix"></div>
    </div>  
   </el-main>  
	</el-container>

  <el-dialog title="请审核状态" :visible.sync="dialogFormVisible">
    <el-form >
      <el-form-item label="审核状态" :label-width="formLabelWidth">
        <el-select v-model="selectStatusVal" placeholder="请选择目前状态" @change="tt">
		  <template v-if="selectRowContent.joinJzz==1">
			  <el-option label="成功" value="3"></el-option>
			  <el-option label="驳回" value="4"></el-option>
		  </template>
		  <template v-else>
			  <el-option label="申请中" value="1"></el-option>
			  <el-option label="处理中" value="2"></el-option>
			  <el-option label="成功" value="3"></el-option>
			  <el-option label="失败" value="4"></el-option>
			  <el-option label="获取积分" value="9"></el-option>
		  </template> 
		  
		  
        </el-select>
      </el-form-item>	
	  <el-form  :inline="true" v-if="selectRowContent.joinJzz==1&&parseInt(selectStatusVal)!==4">
		  <div style="width: 120px;text-align: right;display: inline-block;line-height: 39px;padding-right: 10px;box-sizing: border-box;">pos机终端号</div>
		  <el-form-item v-for="number in serialNumber">{{number}}</el-form-item>
	  </el-form>	
	  <el-form  :inline="true" v-if="selectRowContent.joinJzz==1&&parseInt(selectStatusVal)==4">
	  		<el-form-item label="驳回原因" style="margin-left: 46px;">
	  		  	<el-input v-model="rejectReason" style="width: 140px;"></el-input>
	  		</el-form-item>
	  </el-form>
	  <el-form  :inline="true" label-width="120px" v-if="selectRowContent.joinJzz==1&&parseInt(selectStatusVal)!==4">
		  <el-row> 
			  <el-form-item label="pos机终端号">
				  <el-input v-model="serialNumberValue" style="width: 140px;"></el-input>
			  </el-form-item>
			  <el-button type="primary" @click="addSerialNumber()">添加</el-button>
		  </el-row>
	  </el-form>
	  
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false,serialNumber=[]">取 消</el-button>
      <el-button type="primary" @click="submitHandleCheckUser()">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</body>


  <!-- import JavaScript -->
  <script src="../js/3rd/elementUi/index.js"></script>
  <script src="../js/js/admin_siderbar.js"></script>
  <script src="../js/js/common.js"></script>
  <script>
   var token=getCookie("userToken");
   var userId=getCookie("userId");

   if(!token||!userId){
      window.location.href = "/admin/login.html";
   }
  
  var url=window.location.hash;
  var projectId=url.split("#")[1];
  console.log(projectId)

    new Vue({
      el: '#projectLists',
      data: {
        projectUserData:[],
        selectStatusVal:'',
        selectRowContent:'',
        selectIndex:'',
        dialogFormVisible:false,
        formLabelWidth: '120px',
        isDoingSubmitHandle:false,
		serialNumber:[],
		serialNumberValue:'',
		rejectReason:''
      },
      created:function(){
         var getProjectUrl="/project/getProjectItemUsers ";
         var data={
                   id:projectId,
                   token: token,
                   userId: parseInt(userId),
                   client: 3,
         }
         pushData(getProjectUrl,data,function(res){
             console.log(res)
             if(res.errorCode=="008"){
               window.location.href = "/admin/login.html";
             }
             this.projectUserData=res.data.projectItemUsers;
         }.bind(this))
      },
      filters:{
        type: function (key) {
            key = parseInt(key);
            var map = {
                1: "支付宝",
                2: "微信",      
            };
            return map[key];
        },
        status: function (key) {
            key = parseInt(key);
            var map = {
                1: "申请中",
                2: "处理中", 
                3: "成功", 
                4: "失败",
                9: "获取积分",      
            };
            return map[key];
        },
        formatData:function(key){
          return formatDate(key)
        }
      },
      methods:{
		  tt:function(){
			  console.log(this.selectStatusVal)
		  },
		  addSerialNumber:function(){
			  console.log(this.isInSerialNumber(this.serialNumberValue))
			  if(this.isInSerialNumber(this.serialNumberValue)){
				alert("已经存在")  
			  }else{
				this.serialNumber.push(this.serialNumberValue);
				
				this.serialNumberValue=''
			  }
			  
		  },
		  isInSerialNumber:function(value){
			  let isIn=false
			  this.serialNumber.forEach((number)=>{
				  if(number==value){
					 isIn=true 
				  }
			  })
			  return isIn
		  },
      /*信用卡用户 申请过后不能重复申请*/
          handleCheckUser:function(index,row){
            if(row.projectItemName.indexOf("信用卡")>=0){
              var url="/project/checkCardCanApply ";
              var data={
                client: 3,
                applyUserId:row.userId,
                id: parseInt(row.projectItemId),             
                token: token,
                userId: parseInt(userId)
              }
              pushData(url,data,function(res){
                if(res.state){
                  if(res.data.canApply){
                    this.dialogFormVisible=true;
                    this.selectRowContent=row;
                    this.selectIndex=index;
                  }else{
                    alert("该用户之前已经办理成功过")
                    return;
                  }
                }
              }.bind(this))
            }else{
              this.dialogFormVisible=true;
              this.selectRowContent=row;
              this.selectIndex=index;
            }                
          },  
          submitHandleCheckUser:function(){
            if(this.isDoingSubmitHandle){
              return ;
            }
            if(this.selectRowContent.joinJzz==0){
				if(parseInt(this.selectRowContent.status)==1){
				  if(parseInt(this.selectStatusVal)!==2){
				    alert("请按照顺序审核");
				    return;
				  }
				
				}else if(parseInt(this.selectRowContent.status)==2){
				   if(parseInt(this.selectStatusVal)!==3&&parseInt(this.selectStatusVal)!==4){
				      alert("请按照顺序审核");
				      return;
				   }
				
				}else if(parseInt(this.selectRowContent.status)==4){
				  // if(parseInt(this.selectStatusVal)!==9){
				    alert("失败项目不能获得积分或逆向审核");
				    return;
				  // }
				}else if(parseInt(this.selectRowContent.status)==3){
				  if(parseInt(this.selectStatusVal)!==9){
				    alert("请按照顺序审核");
				    return;
				  }
				  
				}else if(parseInt(this.selectRowContent.status)==9){
				   alert("已获得积分不能往回审核");
				   return;
				}
			}else{
				if(!this.selectStatusVal){
					alert("请选择状态");
					return
				}
				console.log(this.selectStatusVal)
				if(this.serialNumber.length==0&&parseInt(this.selectStatusVal)!==4){
					alert("请填写审核码")
					return
				}
			}

            this.isDoingSubmitHandle=true;
            var url="/project/checkProjectItemUser";
            var data={
                client: 3,
                id: parseInt(this.selectRowContent.id),
                status: this.selectStatusVal,
                token: token,
				rejectReason:this.rejectReason,
                userId: parseInt(userId)
            }
			if(this.selectRowContent.joinJzz==1){
				data.serialNumber=this.serialNumber;
			}
            console.log(data)
            pushData(url,data,function(res){
              this.isDoingSubmitHandle=false;
              if(res.state){
				this.serialNumber=[];
                this.projectUserData[this.selectIndex].status=this.selectStatusVal;
                this.dialogFormVisible=false;
              }else{
                alert(res.message+res.data.result)
              }
            }.bind(this))

          }

        }

      
    })
  </script>
</html>